<template>
  <div>
    <div v-if="show">
      <div class="bg" :style="{ backgroundImage: `url(${url})` }">
        <van-uploader :after-read="afterRead">
          <!-- <img class="auto" :src="userInfo.new" alt=""> -->
        </van-uploader>
      </div>

      <div class="user-desc">
        <div class="user-xinxi">
          <div class="logopic" :style="{ backgroundImage: `url(${logourl})` }">
            <van-uploader :after-read="beforeRead"> </van-uploader>
          </div>

          <div class="user-desc-title-left">
            <div class="user-desc-title-left-name">{{ userInfo.nickName }}</div>
            <div class="user-desc-title-left-qianming" >
              <div v-show="nulldesc">这家伙很懒,什么都没有留下</div>
              {{userInfo.desc}}
            </div>
          </div>
        </div>

        <div class="useritems">
          <div
            class="user-item"
            @click="tz(item.to)"
            v-for="(item, index) in user"
            :key="index"
          >
            {{ item.title }}
            <div class="usericon"><img src="../assets/icon/向右1.png" alt="" width="20px" height="15px"></div>
            
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Mine",
  data() {
    return {
      user: [
        {
          title: "个人资料",
          to: { name: "Userinfo" },
        },
        {
          title: "我的订单",
          to: { name: "Order" },
        },
        {
          title: "我的收藏",
          to: { name: "Alllike" },
        },
        {
          title: "安全中心",
          to: { name: "Security" },
        },
        {
          title: "地址管理",
          to: { name: "AddressList" },
        },
      ],
      nulldesc:true,
      url: "",
      logourl: "",
      userInfo: [],
      appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
      tokenString: this.$cookies.get("TOKEN"),
      show: true,
    };
  },
  created() {
    this.findMy();
    //判断用户是否登录
    if (!this.tokenString) {
      this.show = false;
      this.$dialog
        .confirm({
          title: "是否前往登录",
        })
        .then(() => {
          this.$router.push({ name: "Login" });
        })
        .catch(() => {
          // on cancel
          this.$router.push({ name: "Home" });
        });
    }
    console.log(this.user);
  },
  methods: {
    tz(a) {
      this.$router.push(a);
    },
    //查询下我的
    findMy() {
      let tokenString = this.$cookies.get("TOKEN");
      this.axios({
        method: "get",
        url: "/findMy",
        params: {
          appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
          tokenString,
        },
      }).then((res) => {
        this.userInfo = res.data.result[0];
        if(res.data.result[0].desc){
          this.nulldesc=false
        }else{
          this.nulldesc=true
        }
        this.url = res.data.result[0].userBg;
        this.logourl = res.data.result[0].userImg;
        console.log(res);
      });
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      let imgType = file.file.name.split(".")[1];
      let serverBase64Img = file.content.replace(
        /^data:image\/[A-Za-z]+;base64,/,
        ""
      );
      let str = `appkey=${this.appkey}&tokenString=${this.tokenString}&imgType=${imgType}&serverBase64Img=${serverBase64Img}`;
      this.axios({
        method: "post",
        url: "/updateUserBg",
        data: str,
      }).then((res) => {
        setTimeout(() => {
          this.findMy();
        }, 500);
        console.log(res);
      });
      console.log(file);
    },
    beforeRead(file) {
      // 此时可以自行将文件上传至服务器
      let imgType = file.file.name.split(".")[1];
      let serverBase64Img = file.content.replace(
        /^data:image\/[A-Za-z]+;base64,/,
        ""
      );
      let str = `appkey=${this.appkey}&tokenString=${this.tokenString}&imgType=${imgType}&serverBase64Img=${serverBase64Img}`;
      this.axios({
        method: "post",
        url: "/updateAvatar",
        data: str,
      }).then((res) => {
        setTimeout(() => {
          this.findMy();
        }, 500);
        console.log(res);
      });
      console.log(file);
    },
  },
};
</script>

<style lang="less" scoped>
.useritems{
  
  margin-top: 55px;
}
.logopic {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 5px;
  background-size: cover;
  /deep/.van-uploader__upload {
    width: 80px;
    height: 80px;
    opacity: 0;
  }
}
// .user-item span{
//     margin-right: 10px;
// }
.user-item {
  display: flex;
  height: 55px;
  font-size: 16px;
  border-bottom: 1px solid #e8e8e8;
  margin: 0 10px;
  line-height: 55px;
  .usericon{
    margin-left: auto;
    font-size: 16px;
  }
}
.user-desc-title-left-qianming {
  margin-top: 10px;
  font-size: 14px;
  color: #B5B3C1;
}
.user-desc-title-left-name {
  color: #0c34ba;
  font-size: 20px;
  font-weight: bold;
  margin-top: 5px;
  line-height: 35px;
}
.user-desc-title-left {
  margin-left: 30px;
}

.pic {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-left: 30px;
  margin-top: 20px;
  background-color: skyblue;
}
.user-desc {
  margin: 0 10px;
  // opacity:0.5;
  background: rgba(255, 255, 255, 0.5);
  // background-color: #fff;
  height: 600px;
  transform: translateY(-50px);
  border-radius: 20px;
}
.user-xinxi {
  display: flex;
}
/deep/.van-uploader__upload {
  width: 375px;
  height: 200px;
  opacity: 0;
}
.bg {
  height: 200px;
  background-size: cover;
}
</style>